<template>
  <a-modal
    :title="title"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    :footer="null"
    cancelText="关闭"
    wrapClassName="ant-modal-cust1-warp"
    style="top:5%;overflow-y: hidden"
    :width="1200"
  >
    <a-form :form="form" layout="inline">
      <a-form-item label="名称">
        <a-input placeholder="请输入名称" v-decorator="[ 'name', validatorRules.name]" :disabled="true"></a-input>
      </a-form-item>
      <a-form-item label="类型" :hidden="true">
        <a-input
          placeholder="请输入类别"
          v-decorator="[ 'category', validatorRules.category]"
          :disabled="true"
        ></a-input>
      </a-form-item>
      <a-form-item label="主键" :hidden="true">
        <a-input placeholder="请输入主键" :disabled="true" v-decorator="[ 'key', validatorRules.key]"></a-input>
      </a-form-item>
      <a-form-item label="描述">
        <a-input
          placeholder="请输入描述"
          v-decorator="[ 'description', validatorRules.description]"
          :disabled="true"
        ></a-input>
      </a-form-item>
    </a-form>
    <check-panel ref="bpmnModeler" :processKey="model.key" style="height:650px;"
                 @startType="startTypeMethod" @endType="endTypeMethod" @dateDiffType="dateDiffTypeMethod"/>
  </a-modal>
</template>

<script>
  import pick from 'lodash.pick'
  import BpmnPanel from '@/components/bpmn/modify'
  import CheckPanel from '@/components/bpmn/check'

  import { editModel, getModelSource, deployModelSource } from '@/api/activiti'

  export default {
    components: {
      BpmnPanel,
      CheckPanel
    },
    data() {
      return {
        title: '任务人员与时间分配',
        confirmLoading: false,
        visible: false,
        form: this.$form.createForm(this),
        model: {},
        validatorRules: {
          name: {
            rules: [
              { required: true, message: '请输入名称!' },
              { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
            ]
          },
          category: {
            rules: [
              { required: true, message: '请输入类型!' },
              { min: 0, max: 64, message: '长度不超过 64 个字符', trigger: 'blur' }
            ]
          },
          key: {
            rules: [
              { required: true, message: '请输入主键!' },
              { min: 0, max: 64, message: '长度不超过 64 个字符', trigger: 'blur' }
            ]
          },
          description: {
            rules: [{ min: 0, max: 126, message: '长度不超过 126 个字符', trigger: 'blur' }]
          }
        }
      }
    },
    methods: {
      clearFields(){
        this.startType = []
        this.endType = []
        this.dateDiffType=[]
      },
      show2(obj) {
        this.visible = true
        this.form.resetFields()
        obj.description = JSON.parse(obj.metaInfo).description
        this.model = Object.assign({}, obj)
        let that = this
        this.$nextTick(() => {
          that.setValues()
        })
      },

      setValues() {
        const that = this
        this.form.setFieldsValue(pick(this.model, 'name', 'category', 'key','description','startTime','endTime','dateDiff'))
        getModelSource(this.model.id).then(res => {
          if (res.success) {
            that.$refs.bpmnModeler.loadDiagram(res.result)
          }
        })
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      arrayHandler(arr1,arr2){
        let nodesTemp = arr1.concat(arr2);
        let nodes = [];
        let temp = {};
        nodesTemp.forEach(item=>{
          if(temp[item.activityId]){
            nodes.push({
              ...temp[item.activityId],
              ...item
            })
          }else{
            temp[item.activityId] = Object.assign({},item);
          }
        })
        return nodes;
      },
      handleOk() {
        const that = this
        // let nodes = this.arrayHandler(this.startType,this.endType);
        //     nodes = this.arrayHandler(nodes,this.dateDiffType);
        /*     nodes = this.arrayHandler(nodes,this.startType);
             nodes = this.arrayHandler(nodes,this.endType);*/

        this.$refs.bpmnModeler
          .saveDiagram()
          .then(xml => {
            // 触发表单验证
            that.confirmLoading = true
            let data = Object.assign({}, that.model, { source: xml.xml })
            deployModelSource(data).then(res => {
              if (res.success) {
                that.$emit('deployModel', res.result)
                that.close()
              } else {
                that.$message.warning(res.message)
              }
              that.confirmLoading = false
            })
          })
          .catch(e => {
            console.log(e)
          })
      },
      handleCancel() {
        this.close()
      },
      //任务节点改变时间

      startTypeMethod(properties){
        this.startType=properties
        console.log("startTypeproperties："+this.startType)
      },
      endTypeMethod(properties){
        this.endType=properties
        console.log("endTypeproperties："+this.endType)
      },
      dateDiffTypeMethod(properties){
        this.dateDiffType=properties
        console.log("dateDiffTypeproperties："+this.dateDiffType)
      }
    }
  }
</script>